<template>
  <div class="menu-bar">
    <!-- 单聊图标 -->
    <div
        class="chat-icon single-chat-icon"
        @click="handleSingleChat"
        :style="{ color: menuSelected === 'single' ? '#07c160' : '#222' }"
    >
      <font-awesome-icon
          :icon="menuSelected === 'single' ? ['fas', 'comment'] : ['fas', 'comment']"
      />
    </div>
    <!-- 群聊图标 -->
    <div
        class="chat-icon group-chat-icon"
        @click="handleGroupChat"
        :style="{ color: menuSelected === 'group' ? '#07c160' : '#222' }"
    >
      <font-awesome-icon
          :icon="menuSelected === 'group' ? ['fas', 'comments'] : ['fas', 'comments']"
      />
    </div>
  </div>
</template>

<script>
export default {
  props:{
    menuSelected:{
      type:String,
      default:'single',
    },
    changeMenuSelected: Function
  },
  methods: {
    // 处理单聊图标点击事件
    handleSingleChat() {
      this.changeMenuSelected('single');
    },
    // 处理群聊图标点击事件
    handleGroupChat() {
      this.changeMenuSelected('group');
    }
  }
};
</script>

<style scoped>
.menu-bar {
  position: relative;
  width: 100%;
  height: 100%;
}

.chat-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 28px;
  transition: all 0.3s ease; /* 添加过渡效果，使变化更平滑 */
  /* 确保图标可见 */
  visibility: visible;
  display: block;
}

.single-chat-icon {
  left: 25%;
  transform: translate(-50%, -50%);
}

.group-chat-icon {
  left: 75%;
  transform: translate(-50%, -50%);
}

.chat-icon:hover {
  color: #007bff;
  transform: translate(-50%, -50%) scale(1.1); /* 鼠标悬浮时放大 10% */
}
</style>